<!-- WebComponent example based off element-boilerplate: https://github.com/webcomponents/element-boilerplate -->
<template>
    <style>  
        .weui-slider {
          padding: 15px 18px;
          -webkit-user-select: none;
                  user-select: none;
        }
        .weui-slider__inner {
          position: relative;
          height: 2px;
          background-color: #E9E9E9;
        }
        .weui-slider__track {
          height: 2px;
          background-color: #1AAD19;
          width: 0;
        }
        .weui-slider__handler {
          position: absolute;
          left: 0;
          top: 50%;
          width: 28px;
          height: 28px;
          margin-left: -14px;
          margin-top: -14px;
          border-radius: 50%;
          background-color: #FFFFFF;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        }
        .weui-slider-box {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-align: center;
          -webkit-align-items: center;
                  align-items: center;
        }
        .weui-slider-box .weui-slider {
          -webkit-box-flex: 1;
          -webkit-flex: 1;
                  flex: 1;
        }
        .weui-slider-box__value {
          margin-left: .5em;
          min-width: 24px;
          color: #888888;
          text-align: center;
          font-size: 14px;
        }

    </style>

    <div class="weui-slider">
      <div id="sliderInner" class="weui-slider__inner">
        <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
        <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
      </div>
    </div>

</template>
<script>
    (function() {
        // Creates an object based in the HTML Element prototype
        var element = Object.create(HTMLElement.prototype); 
        // Fires when an instance of the element is created
        var nodeDocument = document.currentScript.ownerDocument;
        element.createdCallback = function() {
            // Gets content from <template>  
            var template = nodeDocument.querySelector('template').content;
            // Creates the shadow root
            var shadowRoot = this.createShadowRoot();
            // Adds a template clone into shadow root
            var clone = document.importNode(template, true); 

            //console.log(shadowRoot.)
            shadowRoot.appendChild(clone);
        };
        document.registerElement('wx-slider', {
            prototype: element
        });
    }());
</script>